/*
 * 用户列表
 * @Author: ljb
 * @Date: 2018-04-20 17:38:08
 * @Last Modified by: ljb
 * @Last Modified time: 2019-05-05 14:16:10
 */
<style lang="less" rel="stylesheet/less" type="text/less">

	.v-customer-skin-test-index {
		.alignLeft {
			text-align: left;
			line-height: 24px;
		}
		.ivu-table {
			// font-size: 16px;
			color: #666;
		}
		.ivu-table-wrapper {
			// border: none;
			.ivu-table th {
				font-size: 15px;
				color: #333;
				font-weight:400;
				// background-color: #fff;
				// &:last-child {
				// 	opacity: 0;
				// }
				// &.ivu-table-column-center {
				// 	opacity: 1;	/* 为了重置th的透明度 */
				// }
			}
			td {
				padding: 20px 0;
			}
			// & > .ivu-spin-fix {
			// 	border-color: transparent;
			// }
		}
		// .ivu-table:after, .ivu-table:before {
		// 	background-color: #fff;
		// }
	}

</style>
<template>
	<div class="v-customer-skin-test-index">

		<Table
			v-if="Object.keys(wechatUsers).length > 0"
			:columns="columns"
			:loading="loading"
			:data="wechatUsers"
			:height="tabPaneTableHeight()"
			class="personal-scrollbar"/>
		<Table
			v-else
			:columns="columns"
			:loading="loading"
			:data="wechatUsers"
			class="personal-scrollbar"/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'WechatUserIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		wechatUsers: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('skin_test.nickname'),
					key: 'nickname',
					align: 'center',
					render: (h, { row }) => <div> { row.nickname || '-' } </div>,
				},

				{
					title: this.$t('skin_test.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: this.$t('skin_test.gender'),
					key: 'sex',
					align: 'center',
					render: (h, { row }) => <div> { this.showGender(row.sex) } </div>,
				},
				// {
				// 	title: this.$t('skin_test.address'),
				// 	key: 'country',
				// 	align: 'center',
				// 	render: (h, { row }) => <div> { this.joinAddress(row) || this.$t('common.unknown') } </div>,
				// },
				// {
				// 	title: this.$t('skin_test.avatar'),
				// 	key: 'headimgurl',
				// 	align: 'center',
				// 	render: (h, { row }) => <div>
				// 		{
				// 			row.headimgurl
				// 				? <img src={ row.headimgurl } alt={this.$t('common.unknown')} width="50%"/>
				// 				: this.$t('common.none')
				// 		}
				// 	</div>,
				// },
				{
					title: this.$t('skin_test.age'),
					key: 'born_at',
					align: 'center',
					render: (h, { row }) => <div> { row.born_at ? this.countAge(row.born_at) : this.$t('common.unknown') } </div>,
				},
				{
					title: this.$t('skin_test.phone'),
					key: 'phone',
					align: 'center',
					render: (h, { row }) => <div> { row.phone || '-' } </div>,
				},
				{
					title: this.$t('skin_test.newest_skin_test'),
					key: 'latest_skin_record',
					align: 'center',
					width: 190,
					render: (h, { row }) => <div> { row.latest_skin_record ? row.latest_skin_record.created_at : this.$t('common.unknown') } </div>,
				},
				// {
				// 	title: this.$t('skin_test.newest_skin_status'),
				// 	key: 'last_hm_skin_info',
				// 	align: 'center',
				// 	width: 300,
				// 	render: (h, { row }) => {
				// 		if (row.last_hm_skin_info) {
				// 			return h('div', {
				// 				class: {
				// 					alignLeft: true,
				// 				},
				// 				domProps: {
				// 					innerHTML: row.last_hm_skin_info || this.$t('common.unknown'),
				// 				},
				// 			});
				// 		}
				// 		return h('div', {
				// 			class: {
				// 				alignLeft: true,
				// 			},
				// 			domProps: {
				// 				innerHTML: row.last_wax_skin_info || this.$t('common.unknown'),
				// 			},
				// 		});
				// 	},
				// },
				{
					title: this.$t('common.operation'),
					align: 'center',
					// width: 120,
					render: (h, { row }) => (
						<div>
							<Button
								name="user_index__view"
								size="small"
								on-click={() => { this.$emit('show', row); }}
								type="primary">
								{this.$t('skin_test.watch')}
							</Button>
						</div>),
				},
			],
		};
	},
	methods: {

		/**
         * 性别展示
         * @param  {string} sex {性别}
         * @return {string} {性别展示}
         */
		showGender(sex) {
			switch (parseInt(sex, 10)) {
			case 1:

				return this.$t('skin_test.male');

			case 2:

				return this.$t('skin_test.female');

			default:

				return this.$t('skin_test.unknown');
			}
		},

		/**
		* 拼接地址
		* @param  {Object} row {行数据}
		* @return {string} {组合完的地址字符串}
		*/
		joinAddress(row) {
			return `${row.country || ''}${row.province || ''}${row.city || ''}`;
		},

		/**
		 * 计算年龄
		 * @param  {String} time {出生日期}
		 * @return {String} {计算得出的年龄}
		 */
		countAge(date) {
			const born_at_times = new Date(date).getTime();

			const now_times = new Date().getTime();

			return Math.ceil((now_times - born_at_times) / 1000 / 3600 / 24 / 365, 10);
		},

	},
};
</script>
